<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="(item, index) in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2"> {{ item.title }}</p>
                        <p class="price"> ￥ {{ item.price }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script>
import request from '@/utils/request.js'
// import axios from 'axios'
export default {
    data() {
        return {
            list: [],
            pagination: 1,
            // list组件绑定的变量
            loading: false,
            finished: false,
            isLoading: false
        }
    },
    // 生命周期
    // created() {
    //     // console.log(123)
    //     // 请求数据
    //     request.get('/list', { params: { pagination: this.pagination, pageNum: 10 } }).then(res => {
    //         console.log(res, 'res')
    //         if (res.data.code == 200) {
    //             // 把后端给的数据赋值给list
    //             this.list = res.data.data
    //         }
    //     })
    // },

    methods: {
        onLoad() {
            // 思路： 滚动条滚动到距离底部300时，触发onLoad事件
            // 第一次： 第一页的十条；
            // 先展示loading
            this.loading = true
            // 请求数据
            request.get('/list', { params: { pagination: this.pagination, pageNum: 10 } }).then(res => {
                console.log(res, 'res')
                if (res.data.code == 200) {
                    // 把后端给的数据拼接之前的list
                    // this.list = this.list.concat(res.data.data)  // concat
                    this.list = [...this.list, ...res.data.data]   // es6中的 扩展运算法
                }
                // 关闭loading
                this.loading = false
                // pagination+1
                this.pagination += 1
                // 判断是否还有数据
                if (this.list.length >= res.data.total) {
                    // 数据全部请求完毕
                    this.finished = true
                }
            })
        },
        onRefresh() {
            // 先展示loading
            this.isLoading = true
            // 延时一秒后关闭loading
            setTimeout(() => {
                // loading关闭
                this.isLoading = false
            }, 1000)
        },
        toDetail(id) {
            // 编程式导航
            // this.$router.push('/detail/' + id) // 字符串拼接
            this.$router.push(`/detail/${id}`) // 模板字符串
        }
    }
}
</script>

<style lang="scss" scoped>
ul {
    // 解决高度塌陷问题
    overflow: hidden;

    li {
        width: 49%;
        float: left;
        margin: 0.5%;

        .itemimg {
            height: 160px;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .iteminfo {
            padding: 2px 8px;

            .price {
                color: red;
                font-size: 20px;
            }
        }
    }
}
</style>